<template>
	<div class="bear-StepContainer">
		<div class="bear-head">
			<div class="bear-tab"
				 v-for="(tab,index) in tabs"
				 :class="{active:index===realValue}"
				 :key="index"
				 @click="$_bear_clickTab(index)">
				<i class="bear-icon"
					 v-if="tab.fontClass"
					 v-html="tab.icon"
					 :class="tab.fontClass"
					 :style="{fontSize:tab.iconSize}"/>
				<Icon class="bear-icon"
					  v-else
					  :type="tab.icon"
					  :style="{fontSize:tab.iconSize}"/>
				<div class="bear-text">{{tab.name}}</div>
			</div>
		</div>
		<div class="bear-body">
			<div class="bear-container"
				 :style="{width:tabs.length*100+'%',marginLeft:-this.realValue*100+'%'}">
				<slot></slot>
			</div>
		</div>
		<div class="bear-foot">
			<iButton type="primary"
					shape="circle"
					:style="{visibility:this.realValue===0?'hidden':'visible'}"
					@click="$_bear_previous">
				上一步
			</iButton>
			<iButton type="primary"
					shape="circle"
					:style="{visibility:this.realValue===tabs.length-1?'hidden':'visible'}"
					@click="$_bear_next">
				下一步
			</iButton>
		</div>
	</div>
</template>

<script>
	/* global utils */
	/**
	 * @author 唐国雄
	 * 步骤容器
	 * 属性----------------------
	 * v-model		当前步骤索引
	 * :font-class	图标默认应用的class
	 * :icon-size	图标默认大小
	 */
	export default{
		name:'StepContainer',
		provide(){
			return {StepContainerInstance:this};
		},
		props:{
			// 当前所在步骤索引
			value:{
				type:Number,
				default:0
			},
			// 图标应用的class
			fontClass:{
				type:String
			},
			// 图标默认大小
			iconSize:{
				type:String,
				default:'14px'
			}
		},
		data(){
			return {
				/**
				 * 单个步骤
				 * @typedef Stepper
				 * @property {String} name 步骤名称
				 * @property {String} icon 图标
				 * @property {String} iconSize 图标大小
				 * @property {String} [fontClass] 图标应用的class
				 */
				/**
				 * 步骤数据
				 * @type {Stepper[]}
				 */
				tabs:[],
				realValue:this.value
			};
		},
		computed:{
			$_bear_changeListener(){
				return [this.fontClass,this.iconSize];
			}
		},
		watch:{
			value(val){
				this.realValue=val;
			},
			$_bear_changeListener(){
				this.slotChange();
			}
		},
		created(){
			this.slotChange=utils.debounced(function(){
				this.$nextTick(function(){
					const tabs=[];
					const fontClass=this.fontClass;
					const iconSize=this.iconSize;
					for(const ele of this.$children){
						if(ele.$options.name==='StepContainerItem'){
							tabs.push({
								name:ele.name,
								icon:ele.icon,
								fontClass:ele.fontClass||fontClass,
								iconSize:ele.iconSize||iconSize
							});
						}
					}
					this.tabs=tabs;
					if(this.realValue>this.tabs.length-1){
						this.realValue=0;
						this.$emit('input',0);
					}
				});
			},100,this);
		},
		methods:{
			/**
			 * 点击指定步骤
			 * @param {Number} index 步骤索引
			 */
			$_bear_clickTab(index){
				this.realValue=index;
				this.$emit('input',this.realValue);
			},
			/**
			 * 上一步
			 */
			$_bear_previous(){
				const len=this.tabs.length;
				this.realValue=(this.realValue-1+len)%len;
				this.$emit('input',this.realValue);
			},
			/**
			 * 下一步
			 */
			$_bear_next(){
				this.realValue=(this.realValue+1)%this.tabs.length;
				this.$emit('input',this.realValue);
			}
		}
	};
</script>

<style lang="scss">
	$head-height:80px;
	$foot-height:50px;
	.bear-StepContainer{
		>.bear-head{
			height:$head-height;
			background:#349fe8;
			display:flex;
			justify-content:center;
			align-items:center;
			color:#fff;
			>.bear-tab{
				position:relative;
				user-select:none;
				cursor:pointer;
				width:280px;
				text-align:center;
				>.bear-icon{
					position:relative;
					display:inline-block;
					width:30px;
					line-height:30px;
					border-radius:50%;
					background:#88cfff;
					z-index:5;
					margin-bottom:10px;
				}
				>.bear-text{
					font-size:16px;
					line-height:1;
				}
				&:not(:first-child):before,&:not(:last-child):after{
					content:'';
					position:absolute;
					background:#88cfff;
					height:3px;
					width:50%;
					top:calc(50% - 13px);
				}
				&:not(:first-child):before{
					left:0;
				}
				&:not(:last-child):after{
					right:0;
				}
				&.active{
					>.bear-icon{
						background:#fff;
						color:#349fe8;
						box-shadow:0 0 0 4px rgba(167,219,255,.5);
					}
					&:before,&:after{
						background:#fff;
					}
				}
			}
		}
		>.bear-body{
			height:calc(100% - #{$head-height + $foot-height});
			overflow:hidden;
			>.bear-container{
				height:100%;
				display:flex;
				transition:margin-left .8s;
				>.bear-StepContainerItem{
					height:100%;
					width:0;
					flex-grow:1;
				}
			}
		}
		>.bear-foot{
			height:$foot-height;
			background:#fff;
			box-shadow:0 0 4px 1px rgba(0,0,0,.2);
			display:flex;
			justify-content:center;
			align-items:center;
			>.ivu-btn{
				margin:0 35px;
			}
		}
	}
</style>
